<template>
  <div class="login-container">
    <div class="login-box">

      <el-card>
        <template #header>
          <h1 class="threesolid">sharp-shop</h1>
          <h3>system-login</h3>
        </template>
        <el-form label-width="80">

          <el-form-item label="用户名">
            <el-input placeholder="username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" placeholder="password"></el-input>
          </el-form-item>


          <el-form-item>
            <el-button type="success" class="btn-login">
              登录
            </el-button>

          </el-form-item>

        </el-form>

      </el-card>


    </div>

  </div>


</template>

<script lang="ts" setup>

</script>

<style scoped>

.el-card {
  color: white;
  border-radius: 12%;
  background-color: #2b3524;
  opacity: .8;
}

.el-form-item__label{
   color: #d4d9e2 !important;
   font-size: 10px;
}

.login-container{

  margin: 0;
  padding: 0;
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  height: 900px;
  overflow: hidden;
  background-image: url("@/assets/bg1.png");

}


.login-box {
  padding: 20px;
  width: 560px;
  border-radius: 30%;
  margin-left: 650px;
  margin-top: 300px;

}


.login-box h1, h3 {
  text-align: center;
}


.threesolid {
  font-size: 40px;
  color: #fff;
  text-shadow: 0px 1px 0px #c0c0c0,
  0px 2px 0px #b0b0b0,
  0px 3px 0px #a0a0a0,
  0px 4px 0px #909090,
  0px 5px 10px rgba(0, 0, 0, .9);
}


.btn-login{
   display: inline-block;
   width: 100%;
   font-weight: bolder;
   font-size: 15px;

}

</style>